import React, { Component } from 'react'
import styles from './index.scss'
import { NavBar, Space, Swiper, Toast, Tag, Divider } from 'antd-mobile'
import { AntOutline, StarOutline, SendOutline } from 'antd-mobile-icons'
class housedetail extends Component {

    render() {
        const right = (
            <div style={{ fontSize: 18 }}>
                <Space>
                    <SendOutline />
                </Space>
            </div>
        )
        const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
        const items = colors.map((color, index) => (
            <Swiper.Item key={index}>
                <div
                    className={styles.content}
                    style={{ background: color, width: '100%', height: '100%' }}
                    onClick={() => {
                        Toast.show(`你点击了卡片 ${index + 1}`)
                    }}
                >
                    {index + 1}
                </div>
            </Swiper.Item>
        ))
        return (
            <div className='container'>
                <div className='main'>
                    <div className="headnav">
                        <NavBar right={right} style={{ backgroundColor: '#21b97a', color: '#ffffff' }}>
                            标题
                        </NavBar>
                    </div>
                    <div className="detailswiper">
                        <Swiper autoplay loop style={{ width: '100%', height: '100%' }}>{items}</Swiper>
                    </div>
                    <div className="detailtitle">
                        <h3>合租.国联大厦 4室一厅</h3>
                        <div className='detailtag'>
                            <Tag color='#e1f5f8' style={{ '--text-color': '#39becd' }}>公寓</Tag>
                            <Tag color='#e1f5f8' style={{ '--text-color': '#39becd' }}>限女生</Tag>
                            <Tag color='#e1f5f8' style={{ '--text-color': '#39becd' }}>近地铁</Tag>
                            <Tag color='#e1f5f8' style={{ '--text-color': '#39becd' }}>精装</Tag>
                            <Tag color='#e1f5f8' style={{ '--text-color': '#39becd' }}>随时看房</Tag>
                        </div>
                        <Divider />
                        <div className='detail_housetitle'>
                            <div>
                                <div className='detail_housetitle_top'>1200
                                    <span className='detail_housetitle_top_span'>/月</span>
                                </div>
                                <div className='detail_housetitle_bottom'>租金</div>
                            </div>
                            <div>
                                <div className='detail_housetitle_top'>四室</div>
                                <div className='detail_housetitle_bottom'>房型</div>
                            </div>
                            <div>
                                <div className='detail_housetitle_top'>89平米</div>
                                <div className='detail_housetitle_bottom'>面积</div>
                            </div>
                        </div>
                        <Divider />
                        <div className='detail_housenav'>
                            <div className='am-flexbox-item'>
                                <div>
                                    <span className='HouseDetail_title__iGpj_'>
                                        装修:
                                    </span>
                                    精装
                                </div>
                                <div>
                                    <span className='HouseDetail_title__iGpj_'>
                                        楼层:
                                    </span>
                                    24
                                </div>
                            </div>
                            <div className='am-flexbox-item'>
                                <div>
                                    <span className='HouseDetail_title__iGpj_'>
                                        朝向:
                                    </span>
                                    南
                                </div>
                                <div>
                                    <span className='HouseDetail_title__iGpj_'>
                                        类型:
                                    </span>
                                    普通住宅
                                </div>
                            </div>
                        </div>
                        <div className='HouseDetail_mapTitle__3reEo'>
                            小区:
                            <span>
                                国联大厦
                            </span>
                        </div>
                        <div className='map'>

                        </div>
                        <div className='furniture'>
                            <h3>房屋配套</h3>
                            <div className='furniture_icon'>
                                <div className='HousePackage_item__2q4AQ '>
                                    <p><AntOutline /></p>
                                    衣柜
                                </div>
                                <div className='HousePackage_item__2q4AQ '>
                                    <p><AntOutline /></p>
                                    衣柜
                                </div>
                                <div className='HousePackage_item__2q4AQ '>
                                    <p><AntOutline /></p>
                                    衣柜
                                </div>
                                <div className='HousePackage_item__2q4AQ '>
                                    <p><AntOutline /></p>
                                    衣柜
                                </div>
                                <div className='HousePackage_item__2q4AQ '>
                                    <p><AntOutline /></p>
                                    衣柜
                                </div>
                                <div className='HousePackage_item__2q4AQ '>
                                    <p><AntOutline /></p>
                                    衣柜
                                </div>
                                <div className='HousePackage_item__2q4AQ '>
                                    <p><AntOutline /></p>
                                    衣柜
                                </div>
                                <div className='HousePackage_item__2q4AQ '>
                                    <p><AntOutline /></p>
                                    衣柜
                                </div>
                                <div className='HousePackage_item__2q4AQ '>
                                    <p><AntOutline /></p>
                                    衣柜
                                </div>
                                <div className='HousePackage_item__2q4AQ '>
                                    <p><AntOutline /></p>
                                    衣柜
                                </div>

                            </div>
                        </div>
                        <div className="HouseDetail_set__26npJ">
                            <h3>房源概括</h3>
                            <div className="HouseDetail_contact__O_lsw">
                                <div className="HouseDetail_user__TZj3w">
                                    <img src="https://api-haoke-web.itheima.net/img/avatar.png" alt="" />
                                    <div className="HouseDetail_useInfo__FrBlz">
                                        <div className="">
                                            王女士
                                        </div>
                                        <div className="HouseDetail_userAuth__Xr6gY">
                                            <i></i>
                                            已认证房主
                                        </div>
                                    </div>
                                </div>
                                <span className='HouseDetail_userMsg__3mcRl'>
                                    发消息
                                </span>
                            </div>
                            <div className="HouseDetail_descText__2JsQA">
                                1 靠台湾街，附近就有公交车站。 2 电梯房，单身公寓。 3 小区绿化好，对面就是江头公园。 4 周边商城 餐饮 银行 市场 种类齐全。
                            </div>
                        </div>
                    </div>
                </div>
                <div className='footer'>
                    <div className='am-flexbox-item'>
                        <span><StarOutline /></span>
                        收藏</div>
                    <div className='am-flexbox-item am-flexbox-item__2nd'>在线咨询</div>
                    <div className='am-flexbox-item'>电话预约</div>
                </div>
            </div>
        )
    }
}
export default housedetail